<template>
<div>
	<content_top title="消息模板"></content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>消息提醒</h3>
		</div>
		<div class="g_box_con">
			<Table :columns="Columns" :data="list" :height="500" :border="true" ref="table">
			</Table>
			<div style="font-size: 14px;overflow: hidden;padding: 10px;">
				<div style="float:left;">
					<Button @click="batch_action">批量停用</Button>
				</div>
				<div style="float:right;">
					<Page :total="count" show-elevator show-total @on-change="goto_page" />
				</div>
			</div>
		</div>
	</div>
	<!-- 公告消息 -->
	<Modal
        v-model="einfo.show"
        title="系统消息"
		:width="1000"
        >
		<div>
			<Form :model="einfo.info" :label-width="150" style="width: 100%" :rules="ruleValidate" ref="form">
				<Row>
					<Col>
						<FormItem label="消息类型：">
							<p>{{einfo.info.msg_type}}</p>
						</FormItem>
						<FormItem label="公告标题：" prop="title">
							<Input style="width: 300px;" v-model="einfo.info.title" placeholder=""></Input>
						</FormItem>
						<FormItem label="内容模板：" prop="content">
							<quill-editor v-model="einfo.info.content"
								ref="myQuillEditor"
								:options="editorOption"
								class="gongao_textarea">
							</quill-editor>
							 
						</FormItem>
						<p style="padding-left:150px;color: #999;">内容不能为空，长度限制在1-300个字符之间</p>
					</Col>
				</Row>
				
			</Form>
		</div>
		<div slot="footer" style="text-align: center;">
			<Button type="success" size="large" @click="handleSubmit('form')">提交</Button>
		</div>
	</Modal>
	
	<target_info v-model="target.show" :cinfo="target.info" :id="target.id" @success="target_success"></target_info>
	
</div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
import target_info from './target'


export default {
    name: 'system_list',
    data () {
		let self = this;
        return {
            Columns: [
				{
					type: 'selection',
					width: 80,
					align: 'center'
				},
				{
					title: '消息类型',
					key: 'msg_type',
					align: 'center',
                    width: 220,
                },
				{
                    title: '系统消息',
					key: 'region',
					align: 'center',
					width: 360,
					render: (h, params) => {
						return h('div', [
							h('i-switch',{
								props:{
									'true-value':1,
									'false-value':0,
									value:parseInt(params.row.sys_is_send)
								},
								on:{
									'on-change':function(val){
										
										self.set_enable(params.row.id,val,'sys');
									}
								}
							}),
							h('div', {
								props: {},
								style: {
									display:'inline-block',
									margin: '0 12px',
								},
							}, '是否发送'),
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									//icon:'trash-a'
								},
								style: {},
								on: {
									click: () => {
										self.edit(params.row,'sys');
									}
								}
							}, '编辑内容')
						]);
					}
                },
				{
                    title: '公告消息',
					key: 'date',
					width: 360,
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('i-switch',{
								props:{
									'true-value':1,
									'false-value':0,
									value:parseInt(params.row.ggao_is_send)
								},
								on:{
									'on-change':function(val){
										
										self.set_enable(params.row.id,val,'ggao');
									}
								}
							}),
							h('div', {
								props: {},
								style: {
									display:'inline-block',
									margin: '0 12px',
								},
							}, '是否发送'),
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									//icon:'trash-a'
								},
								style: {},
								on: {
									click: () => {
										self.edit(params.row,'ggao');
									}
								}
							}, '编辑内容')
						]);
					}
                },
				{
					title:'接收到对象',
					key: 'action',
					align: 'left',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									//icon:'trash-a'
								},
								style: {
									
								},
								on: {
									click: () => {
										self.show_target(params.row)
									}
								}
							}, '编辑内容'),
							h('div', {
								props: {},
								style: {
									display:'inline-block',
									margin: '0 12px',
								}
							}, params.row.groups_data),
						]);
					}
				}
            ],
			list:[],
			einfo:{
				show: false,
				type:'sys',
				info:{
					title:'',
					content:'',
					msg_type:'',
					id:0
				},
			},
			
			ruleValidate:{
				title:[
					{ required: true, message: '消息标题不能为空', trigger: 'blur' }
				],
				content:[
					{ required: true, message: '内容模板不能为空', trigger: 'blur' }
				]
			},
			count:0,
			page:1,
			size:10,
			batch_act: 'no_send',
			editorOption:{
				modules:{
					toolbar:[
					  ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
					  ['blockquote', 'code-block'],     //引用，代码块
		  
		  
					  [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
					  [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
					  [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
					  [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
					  [{ 'direction': 'rtl' }],             // 文本方向
		  
		  
					  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
					  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
		  
		  
					  [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
					  [{ 'font': [] }],     //字体
					  [{ 'align': [] }],    //对齐方式
		  
		  
					  ['clean'],    //清除字体样式
					  //['image','video']    //上传图片、上传视频
		  
					]
				}
			},
			target:{
				show:false,
				id:0,
				info:{}
			}
        };
	},
	components:{
		quillEditor,
		target_info
	},
	created(){
		
		this.load_data();
	},
    mounted(){
      
    },
	methods:{
		
		load_data(){
			
			var self = this;
			var postdata = {
				page: this.page,
			}
			
			Whttp.load('System/Msg_template/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		
		qurey(){
			this.load_data();
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		edit(row,type){
			var info = this._getData(row);
			
			if(type=='sys'){
				this.einfo.info.title = info.sys_title;
				this.einfo.info.content = info.sys_content;
			}
			else if(type=='ggao'){
				this.einfo.info.title = info.ggao_title;
				this.einfo.info.content = info.ggao_content;
			}
			
			
			this.einfo.info.id = info.id;
			this.einfo.info.msg_type = info.msg_type;
			
			
			this.einfo.type = type;
			this.einfo.show = true;
		},
		batch_action(){
			var ids = [];
			

			var sels = this.$refs['table'].getSelection();
			
			for(var i=0;i<sels.length;i++){
				ids.push(sels[i].id);
			}
			
			var self = this;
			var postdata = {
				ids:ids,
				act:this.batch_act
			};
			Whttp.load('System/Msg_template/batch_act',postdata,function(result){
				self.load_data();
				self.$Message.info('操作成功');
			});
			
			
		},
		handleSubmit(name){
			var self = this;
			
			this.$refs[name].validate((valid) => {
				if (valid) {
					self.save();
				}
			})
		},
		save(){
			var self = this;
			var postdata = {};
			
			if(this.einfo.type=='sys'){
				postdata = {
					sys_title:this.einfo.info.title,
					sys_content:this.einfo.info.content,
					id:this.einfo.info.id
				};
			}
			else if(this.einfo.type=='ggao'){
				postdata = {
					ggao_title:this.einfo.info.title,
					ggao_content:this.einfo.info.content,
					id:this.einfo.info.id
				};
			}
			
			Whttp.load('System/Msg_template/save',postdata, (res)=>{
				self.$Message.info('提交成功');
				self.einfo.show = false;
				self.load_data();
			});
		},
		set_enable(id,status,type){
			var self = this;
			var postdata = {};
			
			if(type=='sys'){
				postdata = {
					sys_is_send:status,
					id:id
				};
			}
			else if(type=='ggao'){
				postdata = {
					ggao_is_send:status,
					id:id
				};
			}
			
			Whttp.load('System/Msg_template/save',postdata, (res)=>{
				self.$Message.info('设置成功');
			});
		},
		show_target(row){
			this.target.id = row.id;
			this.target.info = row;
			this.target.show = true;
		},
		target_success(){
			var self = this;
			self.page = 1;
			self.load_data();
		}
	}
};
</script>
<style>
.ql-editor{
	height: 200px;
}
</style>
<style scoped>
.gongao_textarea{
	width: 600px;
	resize:none ;
	
}

</style>